<template>
    <view>
        <uni-forms-item
            :name="name"
            :label="label"
        >
            <uni-file-picker
            	v-model="myImgArr.photo" 
            	file-mediatype="image" 
                file-extname="png,jpg"
                limit="9"
            	mode="grid" 
                @select="selectImgArr($event, 'myPhoto', 'photo')" 
            	@delete="deleteImgArr($event, 'myPhoto', 'photo')" 
            />
        </uni-forms-item>
    </view>
</template>

<script lang="ts" setup>
    import { onLoad, onShow, onHide, onReady, onUnload } from '@dcloudio/uni-app'
    import { markRaw, onBeforeUnmount, reactive, ref, watchEffect } from 'vue'
    import type { Ref, Raw } from 'vue'
    import uploadApi from '@/apis/uploadApi'
    const props = withDefaults(defineProps<{
        name?: string,
        label?: string,
        modelValue?: Array<any>,
    }>(), {
        name: '',
        label: '',
        modelValue: () => [],
    })
    const emits = defineEmits<{
        (e:'update:modelValue', data: any): void
    }>()
    const myImgArr: any = reactive({
         photo: [],
         myPhoto: [],   
    })
    watchEffect(() => {
        myImgArr['myPhoto'] = []
        props.modelValue.forEach((item2: any, index2: number) => {
            myImgArr['myPhoto'].push({
                // uuid: e.tempFiles[index2].uuid,
                path: item2,
                // url: item.imageUrlPrefix + item2,
                url: 'http://60.191.72.66:10089' + item2, //前面要加路径前缀
                // name: e.tempFiles[index2].name,
                // extname: e.tempFiles[index2].extname,
                index: index2,
            })
        })
        myImgArr['photo'] = JSON.parse(JSON.stringify(myImgArr['myPhoto']))
    })
    
    
    
    const formData: Ref<any> = ref({
        photo: [],
    })
    const selectImgArr = (e: any, myFileArr: any, fileArr: any) => {
        console.log('选择文件：',e)
        e.tempFiles.forEach((item: any, index: number) => {
            item.uri = item.url
            item.name = 'files'
        })
        console.log(e.tempFiles)
        uploadApi(e.tempFiles, true, true, true).then((res: any) => {
            if (res.code == 200) {
                res.data.forEach((item2: any, index2: number) => {
                    myImgArr[myFileArr].push({
                        uuid: e.tempFiles[index2].uuid,
                        path: item2.path,
                        url: item2.url,
                        name: e.tempFiles[index2].name,
                        extname: e.tempFiles[index2].extname,
                        index: index2,
                    })
                })
                myImgArr[fileArr] = JSON.parse(JSON.stringify(myImgArr[myFileArr]))
                formData.value[fileArr] = []
                myImgArr[myFileArr].forEach((item3: any, index3: number) => {
                    formData.value[fileArr].push(item3.path)
                })
                emits('update:modelValue', formData.value[fileArr])
                console.log(formData.value[fileArr])
            } else {
                uni.showToast({
                     title: res.msg,
                     icon: 'error',
                     mask: true,
                });
            }
        }).catch(err => {
            myImgArr[fileArr] = JSON.parse(JSON.stringify(myImgArr[myFileArr]))
        }).finally(() => {
            
        })
    }
    const deleteImgArr = (e: any, myFileArr: any, fileArr: any) => {
        myImgArr[myFileArr].forEach((item: any, index: number) => {
            console.log(item)
            console.log(index)
            if (e.tempFile.uuid == item.uuid) {
                myImgArr[myFileArr].splice(index, 1)
                console.log(myImgArr[myFileArr])
            }
        })
        formData.value[fileArr] = []
        myImgArr[myFileArr].forEach((item3: any, index3: number) => {
            formData.value[fileArr].push(item3.path)
        })
        emits('update:modelValue', formData.value[fileArr])
    }
</script>

<style>

</style>